<template>
  <div class="bgff p20">
    <em v-if="0">
      <el-button class="mb20" size="medium" type="primary" @click="addNet">添加工单类型</el-button>
      <edit :is_edit="false" ref="form" :cur_this="cur_this"></edit>
    </em>
    <el-table
      :data="tableData"
      v-loading="loading"
      row-key="id"
      border
      style="width: 100%;margin-top:20px;"
      empty-text="暂无数据"
    >
      <el-table-column type="index" width="50" :index='(index)=>{return (index+1) + (curPage - 1) * size }' label="序号"></el-table-column>
      <el-table-column prop="name" label="工单类型" min-width="150"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" min-width="120">
         <template slot-scope="scope">
            {{new Date(scope.row.createTime).format('yyyy-MM-dd hh:mm:ss')}}
          </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100" v-if="0">
        <template slot-scope="scope">
          <em>
            <el-button @click="editClick(scope.row)" type="text" size="small">编辑</el-button>
            <edit :is_edit="true" :cur_this="cur_this" ref="edform"></edit>
          </em>
          <el-popover :ref="scope.row.id" placement="top" width="120" trigger="click">
            <p class="ptb10 tx-c">确定删除吗？</p>
            <div class="tx-c">
              <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
              <el-button type="primary" size="mini" @click="del(scope.row.id)">确定</el-button>
            </div>
            <el-button slot="reference" type="text" size="mini">删除</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="mt20"
      @current-change="handlePage"
      @size-change="handleSizeChange"
      :current-page.sync="curPage"
      :page-size="size"
      :page-sizes="[5,10]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import edit from "./modul/edit";
import { _orderCategoryList, _orderCategoryDelete } from "@/http/ajax";
export default {
  components: { edit },
  data() {
    return {
      cur_this: this,
      loading: false,
      tableData: [],
      curPage: 1,
      size: 10,
      total: 0
    };
  },
  created() {
    this.getList();
  },
  methods: {
    editClick(row) {
      const _this = this.$refs.edform;
      _this.dialog = true;
      _this.form = {
        name: row.name,
        id: row.id
      };
    },
    addNet() {
      const _this = this.$refs.form;
      _this.dialog = true;
    },
    // 获取banner列表
    getList(page) {
      this.tableData = [];
      this.loading = true;
      let data = {
        page: this.curPage - 1,
        size: this.size,
        sort: null
      };
      _orderCategoryList(
        data,
        res => {
          this.total = res.totalElements;
          this.tableData = res.content;
          this.loading = false;
        },
        err => {
          this.loading = false;
        }
      );
    },
    del(id) {
      _orderCategoryDelete(
        id,
        res => {
           this.$message({
            message: "操作成功",
            type: "success"
          });
          this.getList();
        },
        err => {}
      );
    },
    // 切换页码
    handlePage(val) {
      this.curPage = val;
      this.getList();
    },
     // 切换条数
    handleSizeChange(val) {
      this.size = val;
      this.getList();
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
